<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="public/js/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#el-switch22").bind("click",function (event) {
            el_switch('no');
            event.preventDefault();
        });
    });
    function el_switch(default_s) {//default_s是当前的模式
        var el_switch_ipt=$("#el_switch_ipt").attr('value');
        if (default_s != 'no') {
            el_switch_ipt = default_s;
        }
        if (el_switch_ipt != "yz") {//如果本来不是月租，就变成月租
            $("#el-switch__core").css({
                "width": "58px",
                "border-color": "rgb(19, 206, 102)",
                "background-color": "rgb(19, 206, 102)",
            });
            $("#el-switch__button").css({"transform": "translate(38px, 2px)"});
            $("#el-switch__label--right").css({"display": "none"});
            $("#el-switch__label--left").css({"display": ""});
            $("#el_switch_ipt").attr('value','yz');
        } else {//如果本来是月租，就变成不是月租
            $("#el-switch__core").css({
                "width": "58px",
                "border-color": "rgb(255, 73, 73)",
                "background-color": "rgb(255, 73, 73)"
            });
            $("#el-switch__button").css({"transform": "translate(2px, 2px)"});
            $("#el-switch__label--right").css({"display": ""});
            $("#el-switch__label--left").css({"display": "none"});
            $("#el_switch_ipt").attr('value','ll');
        }

    }
</script>
<style type="text/css">
    .el-switch {
        display: inline-block;
        position: relative;
        font-size: 14px;
        line-height: 22px;
        height: 22px;
        vertical-align: middle;
    }

    .el-switch__label {
        transition: .2s;
        width: 46px;
        height: 22px;
        left: 0;
        top: 0;
        cursor: pointer;
    }

    label {
        cursor: default;
    }

    .el-switch__input {
        display: none;
    }

    .el-switch__label * {
        line-height: 1;
        top: 4px;
        color: #fff;
    }

    .el-switch__label, .el-switch__label * {
        position: absolute;
        display: inline-block;
        font-size: 14px;
    }

    .el-switch__core {
        margin: 0;
        display: inline-block;
        position: relative;
        width: 46px;
        height: 22px;
        border: 1px solid #bfcbd9;
        outline: none;
        border-radius: 12px;
        box-sizing: border-box;
        background: #bfcbd9;
        cursor: pointer;
        transition: border-color .3s, background-color .3s;
    }

    .el-switch__core .el-switch__button {
        top: 0;
        left: 0;
        position: absolute;
        border-radius: 100%;
        transition: transform .3s;
        width: 16px;
        height: 16px;
        background-color: #fff;
    }

    .el-switch--wide .el-switch__label.el-switch__label--right span {
        right: 10px;
    }

    .el-switch--wide .el-switch__label.el-switch__label--left span {
        left: 10px;
    }
</style>
<input type="hidden" id="el_switch_ipt" value="yz"/>
<label id="el-switch22" class="el-switch el-switch--wide">
    <input type="checkbox" name="" true-value="true" class="el-switch__input">
    <span id="el-switch__core" class="el-switch__core"
          style="width: 58px; border-color: rgb(19, 206, 102); background-color: rgb(19, 206, 102);">
        <span id="el-switch__button" class="el-switch__button" style="transform: translate(38px, 2px);"></span>
    </span>
    <div id="el-switch__label--left" class="el-switch__label el-switch__label--left" style="width: 58px;">
        <span>月租</span>
    </div>
    <div id="el-switch__label--right" class="el-switch__label el-switch__label--right"
         style="width: 58px;display: none;"><span>流量</span></div>
</label>
</body>
</html>